<template>
	<view class="container">
		<view class="form-item">
			<input type="number" v-model="phone" placeholder="请输入手机号" />
		</view>

		<view class="form-item">
			<input type="number" v-model="code" placeholder="请输入验证码" />
			<button @click="getCode" :disabled="codeCd">{{ codeButtonText}}</button>
		</view>

		<view class="form-item">
			<checkbox @click="changeProtocol"> 我已阅读并同意
				<text @click.stop="showPr">《用户协议》</text>
			</checkbox>
			<!-- 			<p>是否同意：{{ agree }}</p> -->
		</view>

		<button @click="login">登录</button>
		<up-popup :show="show" mode="center" @close="close" @open="open">
			<view>
				<text>我同意登陆相关的信息</text>
			</view>
		</up-popup>

		<!-- <button @click="test">测试</button> -->
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	import {
		useTokenStore
	} from '@/stores/token.js';
	import {
		useUserStore
	} from '@/stores/user.js'

	const phone = ref('');
	const code = ref('');
	const agree = ref(false);
	const codeButtonText = ref('获取验证码');
	const codeCd = ref(false);
	const phoneRegex = /^1[3-9]\d{9}$/;
	const show = ref(false);

	const getCode = () => {
		console.log("获取验证码")
		// 检查手机号是否为空
		if (phone.value == null || phone.value == '') {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return;
		};
		//检查手机号格式是否正确
		if (!phoneRegex.test(phone.value)) {
			uni.showToast({
				title: '手机号格式不正确',
				icon: 'none'
			});
			return;
		};
		getCodeCd();

	}
	const changeProtocol = () => {
		agree.value = !agree.value
		console.log(agree.value)
	}

	const getCodeCd = () => {
		codeCd.value = true;
		console.log(codeCd.value)
		// 倒计时逻辑
		const cd = (seconds) => {
			let timer = setInterval(() => {
				codeButtonText.value = '验证码' + `${seconds}秒`;
				seconds -= 1;
				if (seconds < 0) {
					clearInterval(timer);
					codeButtonText.value = '获取验证码';
					codeCd.value = false; // 倒计时结束后启用按钮
				}
			}, 1000);
		};

		uni.request({
			url: ' http://localhost:8000/agriculture-user/user/getCode', // 必填，请求的url
			method: 'POST', // 默认为GET，请求方法
			data: { // 请求的参数
				phone: phone.value
			},
			success: (res) => {
				console.log('请求成功', res.data);
				cd(2); // 启动60秒倒计时
			}
		})
	};
	const login = () => {
		// console.log(agree.value)
		// if (!agree.value) {
		// 	uni.showToast({
		// 		title: '请先同意并勾选用户协议',
		// 		icon: 'none'
		// 	});
		// 	return;
		// };
		// // 检查手机号是否为空
		// if (phone.value == null || phone.value == '') {
		// 	uni.showToast({
		// 		title: '请输入手机号',
		// 		icon: 'none'
		// 	});
		// 	return;
		// };
		// //检查手机号格式是否正确
		// if (!phoneRegex.test(phone.value)) {
		// 	uni.showToast({
		// 		title: '手机号格式不正确',
		// 		icon: 'none'
		// 	});
		// 	return;
		// };
		// // 检查验证码是否为空
		// if (code.value == null || code.value == '') {
		// 	uni.showToast({
		// 		title: '请输入验证码',
		// 		icon: 'none'
		// 	});
		// 	return;
		// };
		// uni.request({
		// 	url: ' http://localhost:8000/agriculture-user/user/login', // 必填，请求的url
		// 	method: 'POST', // 默认为GET，请求方法
		// 	data: { // 请求的参数
		// 		phone: phone.value,
		// 		code: code.value
		// 	},
		// 	success: (res) => {
		// 		const tokenStore = useTokenStore();
		// 		tokenStore.setToken(res.data);
		// 		console.log('登陆成功', res.data);
		// 		const token = tokenStore.token;
		// 		console.log(token);
		// 		getUserInfo();
		// 	}
		// })
		getUserInfo();

	};
	const test = () => {
		const tokenStore = useTokenStore();
		tokenStore.setToken('123123');
		const token = tokenStore.token;
		console.log(token);
	};
	const showPr = () => {
		open();
		console.log("用户协议");
	};
	const open = () => {
		show.value = true;
	};
	const close = () => {
		show.value = false;
	};
	const getUserInfo = () => {
		console.log("获取用户信息ing")
		uni.request({
			url: ' http://localhost:8000/agriculture-user/user/getUserInfo', // 必填，请求的url
			method: 'POST', // 默认为GET，请求方法
			data: { // 请求的参数
				// phone: phone.value
				phone: "17304665569"
			},
			success: (res) => {
				console.log(res.data.data)
				const user = useUserStore().user;
				user.userId = res.data.data.userId;
				user.userName = res.data.data.userName;
				user.userPhone = res.data.data.userPhone;
				user.userAvatar = res.data.data.userAvatar;
				console.log(user);
				
				uni.navigateTo({
					url: '/pages/index/index'
				});
			}
		})
	};
</script>

<style scoped lang="scss">
	.container {
		padding: 20px;
	}

	.form-item {
		margin-bottom: 15px;
		display: flex;
		align-items: center;
	}

	input {
		flex-grow: 1;
		padding: 10px;
		margin-right: 10px;
		/* Add space between input and button */
	}

	.code-button {
		padding: 10px;
	}

	button {
		margin-top: 10px;
	}
</style>